<!-- Schedule List -->
<!-- Author: Edwin -->
<template>
  <div class="col-lg-12 control-section">
    <div>
      <ejs-grid :dataSource="scheduleList"
                ref="schedule-list"
                :allowResizing='true'
                :allowFiltering='true'
                :filterSettings='filterSettings'
                :allowGrouping='false'
                :toolbar="toolbar"
                :showColumnChooser='true'
                :groupSettings='groupOptions'
                :allowReordering='true'
                :allowSorting='true'
                v-loading="tableLoading"
                :allowPaging='true'
                :pageSettings="pageSettings"
                :frozenColumns="$hasPermission('sys:workschedule:templateSetting')?6:5"
                :height='gridHeight'
                :actionComplete='actionComplete'
                element-loading-background="rgba(255, 255, 255, 0.8)">
        <e-columns>
          <e-column type='checkbox'
                    :allowFiltering='false'
                    :allowSorting='false'
                    width='40'></e-column>
          <e-column field='username'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.userName')"></e-column>
          <e-column field='timezoneFull'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.timezone')"></e-column>
          <e-column field='attendanceFlag'
                    width='110'
                    :template='EnableFormat'
                    v-if="$hasPermission('sys:workschedule:templateSetting')"
                    :headerText="$t('custom.workSchedule.listTitle.attendanceFlag')"></e-column>
          <e-column field='timezoneName'
                    alignText='center'
                    width='180'
                    clipMode='EllipsisWithTooltip'
                    :headerText="$t('custom.workSchedule.listTitle.timezoneShortName')"></e-column>
          <e-column :headerText="$t('custom.workSchedule.listTitle.action')"
                    :template='actionComponent'
                    width='80'
                    v-if="$hasPermission('sys:workschedule:templateSetting')"
                    textAlign="center"></e-column>
          <e-column field='managerName'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.managerName')"></e-column>
          <e-column field='jobTitle'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.jobTitle')"></e-column>
          <e-column field='officeLocation'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.officeLocation')"></e-column>
          <e-column field='timezoneOffset'
                    width='180'
                    :headerText="$t('custom.workSchedule.listTitle.timezoneOffset')"></e-column>
          <e-column field='workSchedule.MONDAY'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.monday')"></e-column>
          <e-column field='workSchedule.TUESDAY'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.tuesday')"></e-column>
          <e-column field='workSchedule.WEDNESDAY'
                    width='120'
                    :headerText="$t('custom.workSchedule.listTitle.wednesday')"></e-column>
          <e-column field='workSchedule.THURSDAY'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.thursday')"></e-column>
          <e-column field='workSchedule.FRIDAY'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.friday')"></e-column>
          <e-column field='workSchedule.SATURDAY'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.saturday')"></e-column>
          <e-column field='workSchedule.SUNDAY'
                    width='110'
                    :headerText="$t('custom.workSchedule.listTitle.sunday')"></e-column>

        </e-columns>
      </ejs-grid>
    </div>

  </div>
</template>
<script>
import { debounce } from 'lodash'

import ActionComponent from './action-component'
import { BridgeComponent } from './bridgeComponent'
import EnableFormat from './template/EnableFormat'

export default ({
  props: {
    selectDeptList: {
      type: Array,
      default: function () {
        return null
      }
    },
    selectUser: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      gridHeight: 800,
      pageOptions: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      tableLoading: false,
      scheduleList: [],
      actionComponent: function () {
        return { template: ActionComponent }
      },
      EnableFormat: function () {
        return { template: EnableFormat }
      },
      groupOptions: { columns: [] },
      filterSettings: { type: 'Excel' },
      toolbar: ['ColumnChooser'],
      pageSettings: { pageSize: 200, pageSizes: [10, 50, 100, 200, 1000], pageCount: 4 }
    }
  },

  created () {
    this.gridHeight = document.documentElement.clientHeight - 380
    this.updateList()
  },
  methods: {
    actionComplete (args) {
      if(["columnstate"].includes(args.requestType)){
        this.$refs['schedule-list'].ej2Instances.componentRefresh()
      }
    },
    updateList () {
      BridgeComponent.$on('updateScheduleList', () => {
        this.getScheduleList()
      })
    },
    getScheduleList: debounce(function (currentPage) {
      this.tableLoading = true
      const params = {
        tenantCode: this.$store.state.user.tenantCode,
        // current: currentPage || this.pageOptions.currentPage,
        size: 999,
        deptIds: this.selectDeptList && this.selectDeptList.join(','),
        username: this.selectUser
      }
      this.$interface.schedule.getScheduleListApi(params)
        .then(({ data: res }) => {
          this.tableLoading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.scheduleList = res.data.records
          this.pageOptions.total = res.data.total * 1
          this.pageOptions.currentPage = res.data.current * 1
        }).catch(() => { this.tableLoading = false })
    }, 1000),
    getScheduleSelected () {
      return this.$refs['schedule-list'].getSelectedRecords()
    },
    currentChange (e) {
      if (e) {
        this.getScheduleList(e)
      }
    },
    sizeChange (e) {
      this.pageOptions.currentPage = 1
      this.pageOptions.pageSize = e
      if (e) {
        this.getScheduleList()
      }
    }
  }

})
</script>
